<template>
  <view class="card-item" @click="$emit('click')">
    <template v-if="imgUrl">
      <view class="news-row">
        <view class="img-wrapper">
          <image :src="imgUrl" class="news-image" mode="aspectFill"></image>
          <view class="img-bottom-tag">
            <text class="source-tag">{{ author }}</text>
            <text class="comment-tag">{{ comments }} 评</text>
          </view>
        </view>
        <view class="news-text">
          <text class="news-title">{{ title }}</text>
        </view>
      </view>
    </template>
    <template v-else>
      <text class="news-title">{{ title }}</text>
      <view class="tag-bar">
        <text class="top-tag" v-if="isTop">置顶</text>
        <text class="source-tag">{{ author }}</text>
        <text class="comment-tag">{{ comments }} 评</text>
      </view>
    </template>
  </view>
</template>

<script>
export default {
  name: "NewsView",
  props: {
    title: { 
		type: String, 
		default: "默认新闻标题", 
		required: true ,
		},
    isTop: { 
		type: Boolean, 
		default: false, 
		required: true ,
		},
    author: { 
		type: String, 
	    default: "未知来源", 
		required: true ,
		},
    comments: { 
		type: Number, 
		default: 0, 
		required: true ,
		},
    imgUrl: { type: String, 
	default: "" ,
	}
  }
};
</script>

<style scoped>
.card-item {
  padding: 24rpx 30rpx; 
  border-bottom: 1px solid #f5f5f5;
  background-color: white;
}
.news-row {
  display: flex;
  gap: 24rpx;
  align-items: flex-start;
}
.img-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}
.news-image {
  width: 240rpx; 
  height: 240rpx;
  border-radius: 16rpx;
  object-fit: cover;
}
.img-bottom-tag {
  display: flex;
  gap: 16rpx;
  font-size: 24rpx;
  color: #888;
}
.news-text {
  flex: 1;
}
.news-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  display: block;
}
.tag-bar {
  display: flex;
  align-items: center;
  gap: 20rpx;
  font-size: 24rpx;
  margin-top: 16rpx;
}
.top-tag {
  background-color: #e63946;
  color: white;
  padding: 2rpx 12rpx;
  border-radius: 4rpx;
}
.source-tag, .comment-tag {
  color: #888;
}
</style>